<template>
 <div class="messageContainer">
   <div class="header">
    <div class="header_hd">
      <div class="hd_jpg"><img src="/static/images/huangguan.jpg"></div>
      <span>狄仁杰考官公告</span>
      </div>
   </div>
   <div class="messageList">
     <a class="weui-cell  weui-cell_access" href="javascript:" @click="toShow_1">
       <div class="weui-cell__bd">
         <p>准备增加用户签到功能</p>
       </div>
       <div class="weui-cell__ft">
       </div>
     </a>
     <a class="weui-cell  weui-cell_access" href="javascript:" @click="toShow_2">
       <div class="weui-cell__bd">
         <p>小程序的答题技巧</p>
       </div>
       <div class="weui-cell__ft">
       </div>
     </a>
     <a class="weui-cell  weui-cell_access" href="javascript:" @click="toShow_3">
       <div class="weui-cell__bd">
         <p>关于小程序</p>
       </div>
       <div class="weui-cell__ft">
       </div>
     </a>
   </div>
  </div>
</template>

<script>

export default {
  data () {
    return {

    }
  },

  components: {
  },
  methods: {
    toShow_1(){
      wx.showModal({
        title: '关于增加签到',
        content: '决定增加签到功能，签到用积分制，连续签到积分倍增，到一定积分可领取奖励',
        success (res) {
          if (res.confirm) {
            console.log('用户点击确定')
          } else if (res.cancel) {
            console.log('用户点击取消')
          }
        }
      })
    },
    toShow_2(){
      wx.showModal({
        title: '答题技巧',
        content: '先去学习对应知识点，然后回来答题效果更佳喔',
        success (res) {
          if (res.confirm) {
            console.log('用户点击确定')
          } else if (res.cancel) {
            console.log('用户点击取消')
          }
        }
      })
    },
    toShow_3(){
      wx.showModal({
        title: '关于小程序',
        content: '小程序是华农六等分程序员开发的，用于免费学习各个阶段各个科目的用途，欢迎使用',
        success (res) {
          if (res.confirm) {
            console.log('用户点击确定')
          } else if (res.cancel) {
            console.log('用户点击取消')
          }
        }
      })
    }
  }
}
</script>

<style scoped>
.messageContainer {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background-color: #f6f6f6;
}

.header {
  padding-top: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.messageList {
  margin: 30px auto;
  width: 80%;
  border: 1px solid #CCCCCC;
  border-radius: 10px;
  overflow: hidden;
}
.messageList a {
  border-bottom: 1px solid #CCCCCC;
}
.hd_jpg {
  border-radius: 30px;
}
.hd_jpg img {
  width: 162px;
  height: 146px;
}
.header_hd span{
  padding-left: 13px;
}
</style>
